<template>
  <div class="upload-wrapper d-flex al-end t-light pointer">
    <div class="upload-video bd-filt" :style="boxStyle" @click="openVideoMaterial">
      <template v-if="videoUrl">
        <img v-if="coverUrl" class="video-preview fulled-h fulled-w" :src="$staticRes(coverUrl)" />
        <div v-else class="fulled-h bgc-black"></div>
        <div class="icon-play absCenter"></div>
      </template>
      <div v-else class="upload-area d-flex flex-column jc-center al-center m-center" :style="uploadAreaStyle">
        <SvgIcon icon-class="video" class="fs-xl"></SvgIcon>
        <div class="mt-5">添加视频</div>
      </div>
    </div>
    <div class="tip ml-12">
      <slot name="tip">
        <div class="tip">
          请上传时长小于1小时<br />的视频，支持主流的 <br /><el-tooltip
            effect="dark"
            content="MP4/WebM/Ogg"
            placement="right"
            ><span class="t-theme">视频格式</span></el-tooltip
          >
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
  import { MATERIAL_OPERATE_ROOT_MAP } from '@/constants';

  export default {
    name: 'VideoMaterialSelector',

    components: {},

    props: {
      // 视频链接
      videoUrl: {
        type: String,
        default: ''
      },
      // 视频封面
      coverUrl: {
        type: String,
        default: ''
      },
      // 视频类型限制
      videoType: {
        type: Array,
        default: () => ['png', 'jpg', 'jpeg', 'gif']
      },
      // 视频宽度限制
      videoWidth: {
        type: Number,
        default: 0
      },
      // 视频高度限制
      videoHeight: {
        type: Number,
        default: 0
      },
      // 视频宽度比例限制
      videoWidthRatio: {
        type: Number,
        default: 0
      },
      // 视频高度比例限制
      videoHeightRatio: {
        type: Number,
        default: 0
      },
      // 限制视频大小，默认99M
      videoSize: {
        type: Number,
        default: 99
      },
      // 组件的固定宽度
      width: {
        type: Number,
        default: null
      },
      // 组件的固定高度
      height: {
        type: Number,
        default: null
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        dialogType: '',
        OPERATE_ROOT_MAP: MATERIAL_OPERATE_ROOT_MAP.get('video')
      };
    },

    computed: {
      boxStyle() {
        return {
          width: `${(this.width || 120 / 100).toFixed(2)}rem`,
          height: `${((this.height || 120) / 100).toFixed(2)}rem`
        };
      },
      uploadAreaStyle() {
        const w = this.width || this.height || 120;
        const h = this.height || this.width || 120;
        return {
          width: `${(w / 100).toFixed(2)}rem`,
          height: `${(h / 100).toFixed(2)}rem`
        };
      }
    },

    methods: {
      openVideoMaterial() {
        this.dialogType = 'videoMaterial';
      },

      // 选中上传的视频
      onSucceed(videoInfo) {
        this.$emit('update:videoUrl', videoInfo.url);
        this.$emit('update:coverUrl', videoInfo.coverUrl);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .upload-wrapper {
    .upload-video {
      position: relative;
      border: 1px dashed #cecece;

      &:hover {
        border-color: map-get($bdColors, 'theme');

        .upload-area {
          color: map-get($colors, 'theme');
        }
      }

      .video-preview {
        object-fit: cover;
        object-position: center;
      }

      .icon-play {
        @include bg('icons/icon-play.png');
        display: block;
        width: 32px;
        height: 32px;
      }

      .upload-area {
        line-height: 1;
      }
    }

    .tip {
      margin-top: 8px;
      line-height: 18px;
    }
  }
</style>
